<template>
  <div class="home-life">
    <div class="bgcolor"></div>
    <h4 class="title">--生活服务--</h4>
    <div class="list">
      <div class="item" v-for="item in enters" :key="item.imgUrl">
        <router-link :to="{name:item.href}">
          <img :src="item.imgUrl" alt="item.title">
          <h4>{{item.title}}</h4>
          <p v-if="item.des">{{item.des}}</p>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import Slider from '../core/slider'
export default {
  name: 'homeLife',
  components: {
    Slider
  },
  data () {
    return {
      items: [{href: 'home', imgUrl: 'https://img12.360buyimg.com/jrpmobile/jfs/t1/4093/36/6284/46179/5ba222d4Ef6991e80/fcd0a90a6863602f.jpg?width=750&height=320'},
        {href: 'home', imgUrl: 'https://img12.360buyimg.com/jrpmobile/jfs/t1/2790/15/6365/41512/5ba22351E6a312896/91ede54780a0ef37.jpg?width=750&height=320'}],
      enters: [
        {
          href: 'home',
          imgUrl: '//img12.360buyimg.com/jrpmobile/jfs/t4375/104/1184122472/3976/89741da4/58be8a6eNf10193d0.png?width=135&height=135',
          title: '惠加油'},
        {
          href: 'home',
          imgUrl: '//img12.360buyimg.com/jrpmobile/jfs/t4747/185/1901740991/5892/1383fb93/58f57851N17ee6993.jpg?width=132&height=132',
          title: '小白信用',
          des: '全新升级'},
        {
          href: 'home',
          imgUrl: '//img12.360buyimg.com/jrpmobile/jfs/t3241/234/8044685271/3713/7b29f77f/58be89c8Nb9d41295.png?width=135&height=135',
          title: '信用卡还款'},
        {
          href: 'home',
          imgUrl: '//img12.360buyimg.com/jrpmobile/jfs/t3172/259/7993557249/4351/fd082707/58be8a81Nd7716a06.png?width=135&height=135',
          title: '卡转让'},
        {
          href: 'home',
          imgUrl: '//img12.360buyimg.com/jrpmobile/jfs/t3085/320/8107659086/4344/cdbba2dd/58be8acfNdadcaf00.png?width=135&height=135',
          title: '定期还款'}]
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '../../assets/css/varibles.styl'
  @import '../../assets/css/mixins.styl'
  .bgcolor
    pdTop()
  .title
    jdTitle()
  .list
    height:0
    width: 100%
    padding-bottom:35%
    overflow:hidden
    display:flex
    .item
      width:20%
      height:1.8rem
      box-sizing:border-box
      padding:.1rem
      text-align:center
      line-height:.4rem
      h4
        ellipse()
        margin-top:.1rem
      img
        width:100%
      a
        display:block
        text-decoration:none
        color:#666
        font-size:.24rem
      p
        color: #FF801A
</style>
